<template>
  <div class="index-box" ref="index">

        <div class="search" ref="search">
         <el-form :inline="true" :model="searchForm" size="small" ref="searchForm" @submit.native.prevent
           class="demo-form-inline" id="searchBox">
           <el-form-item prop="code">
               <el-input v-model="searchForm.code" clearable placeholder="请输入申请编号"></el-input>
           </el-form-item>
           <el-form-item prop="applyTime">
             <el-date-picker v-model="applyTime" type="daterange" align="right" unlink-panels range-separator="至"
               start-placeholder="申请开始日期" end-placeholder="申请结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
               :picker-options="pickerOptions">
             </el-date-picker>
           </el-form-item>
           <el-form-item prop="auditTime">
             <el-date-picker v-model="auditTime" type="daterange" align="right" unlink-panels range-separator="至"
               start-placeholder="审核开始日期" end-placeholder="审核结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
               :picker-options="pickerOptions">
             </el-date-picker>
           </el-form-item>

           <el-form-item class="clearfix">
             <el-button type="primary" @click="handleSearch()" icon="el-icon-search">查询</el-button>
             <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
           </el-form-item>
         </el-form>
        </div>
        <div class="actionBtn" ref="actionBtn">
          <div class="actionBtnLeft">
            <el-radio-group v-model="searchForm.auditStatus" size="small" style="margin-right: 15px;" @change="handleSearch">
              <el-radio-button label="">全部</el-radio-button>
              <el-radio-button label="1">待审核</el-radio-button>
              <el-radio-button label="2">已通过</el-radio-button>
              <el-radio-button label="3">已驳回</el-radio-button>
            </el-radio-group>
            <el-button type="primary" @click="handleAdd()" size="small" icon="el-icon-plus">申请好店广告位</el-button>
          </div>
          <div class="actionBtnRight">
             <MyRefresh/>
              <MyTableColumnSet :tableColumn.sync="tableColumn" :hideTableColumn.sync="hideTableColumn" :tableColumnType.sync="tableColumnType"></MyTableColumnSet>
          </div>
        </div>
        <div class="table" ref="table">
          <el-table :data="dataList" style="width: 100%;" row-key="orderId" border stripe :height="tableHeight" @selection-change="handleSelectionChange" default-expand-all>
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="applyCode" label="申请编号" v-if="!hideTableColumn.includes('code')"></el-table-column>
            <el-table-column prop="promotionType" align="center" label="推广位类型" v-if="!hideTableColumn.includes('type')">
              <template #default="scope">
                 <span>{{scope.row.promotionType=='1'?'门店推荐(展位)':'好店广告位(Banner)'}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="bannerImage" align="center" label="Banner图片" v-if="!hideTableColumn.includes('link')">
              <template #default="scope">
                 <el-image :src="scope.row.bannerImage" fit="fill" v-image-preview="scope.row.bannerImage" class="img" v-if="scope.row.promotionType=='2'"></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="salePrice" align="center" label="申请时间" v-if="!hideTableColumn.includes('applyTime')" sortable>
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.applyTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="statusName" align="center" label="审核时间" v-if="!hideTableColumn.includes('auditTime')" sortable>
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.auditTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="auditRemark" align="center" label="审核备注" v-if="!hideTableColumn.includes('auditRemark')" show-overflow-tooltip width="300"> </el-table-column>
            <el-table-column prop="salePrice" align="center" label="状态" v-if="!hideTableColumn.includes('status')">
              <template slot-scope="scope">
                 <el-tag :type="scope.row.auditStatus=='1'?'primary':(scope.row.auditStatus=='2'?'success':'warning')">{{scope.row.auditStatus=='1'?'待审核':(scope.row.auditStatus=='2'?'已通过':'已驳回')}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="name" align="center" label="操作" >
              <template #default="scope">
                    <el-button
                      size="medium"
                      type="text"
                      icon="el-icon-view"
                      @click="handleDetail(scope.row)"
                    >查看详情</el-button>
                    <el-button
                      size="medium"
                      type="text"
                      icon="el-icon-document"
                      @click="handleDelt(scope.$index, scope.row)"
                    >删除</el-button>

              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page" ref="page">
          <MyPagination
             :total="total"
             :page.sync="searchForm.pageNum"
             :limit.sync="searchForm.pageSize"
             @pagination="dataInfo"
           />
        </div>

      <!--申请好店推广位-->
      <el-dialog :title="dialogTitle" width="600px" v-dialogDrag :close-on-click-modal="false"  :visible.sync="applyGoodStoreVisible" @close="applyGoodStoreVisible = false">
        <el-form id="userDialog" label-position="right" :model="applyGoodStore" :rules="editAddrRules" ref="applyGoodStore">
          <el-form-item style="width:100%" label="类型:" prop="audit" label-width="125px">
             <el-radio-group v-model="applyGoodStore.promotionType">
               <el-radio label="1">门店推荐(展位)</el-radio>
               <el-radio label="2">好店广告位(Banner)</el-radio>
             </el-radio-group>
          </el-form-item>
          <el-form-item label="上传Banner图:" prop="bannerImage" label-width="125px" v-if="applyGoodStore.promotionType.includes('2')">
            	<MyUpImg :imagePreview='applyGoodStore.bannerImage'  @change="imageChange"  imageSize="chang" size="700"></MyUpImg>
              <p style="color:red">图片规格必须为：宽 700px、高230px</p>
              <p style="color:#FF7E00">注：上传Banner图时，一定要按照图片的规格大小和图片展现的方式制作，您可右击下载图片进行参考，上传的图若造成平台负面影响，仟店平台会下架您的商品并追究相关责任。</p>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="applyGoodStoreVisible = false" size="small">取 消</el-button>
          <el-button type="primary" @click="submitApplyGoodStore('applyGoodStore')" size="small" :loading="userLoading">确 定</el-button>
        </div>
      </el-dialog>


      <!--查看详情-->
      <el-dialog title="查看详情" width="600px" v-dialogDrag :close-on-click-modal="false"  :visible.sync="detailVisible" @close="detailVisible = false">
        <el-form id="userDialog" label-position="right" :model="statusRow" >
          <el-form-item label="申请编号:" prop="bannerImage" label-width="125px">
              {{statusRow.applyCode}}
          </el-form-item>
          <el-form-item style="width:100%" label="类型:" prop="audit" label-width="125px">
             <el-radio-group v-model="statusRow.promotionType">
               <el-radio :label="1">门店推荐(展位)</el-radio>
               <el-radio :label="2">好店广告位(Banner)</el-radio>
             </el-radio-group>
          </el-form-item>
          <el-form-item label="上传Banner图:" prop="bannerImage" label-width="125px" v-if="statusRow.promotionType=='2'">
            	<MyUpImg :imagePreview='statusRow.bannerImage'  @change="imageChange"  imageSize="chang" size="700"></MyUpImg>
              <p style="color:red">图片规格必须为：宽 700px、高230px</p>
          </el-form-item>
          <el-form-item label="申请时间:" label-width="125px" >
            {{ parseTime(statusRow.applyTime) }}
          </el-form-item>
          <el-form-item label="审核时间:" label-width="125px" >
            {{ parseTime(statusRow.auditTime) }}
          </el-form-item>
          <el-form-item label="审核备注:" label-width="125px" v-if="statusRow.auditRemark">
            {{ statusRow.auditRemark }}
          </el-form-item>
        </el-form>

      </el-dialog>


  </div>
</template>

<script>
  import common from '@/api/api';
  import { storePromotionDelete, storePromotionList, storePromotionRead,storePromotionCompare,storePromotionAdd } from '@/api/getData';
  import {timeForMat} from '@/config/mUtils.js'
  import option from '../../common/option.js';
  export default {
    data() {
      return {
        loading: false,
        userLoading: false,
        applyTime:[],
        auditTime:[],
        searchForm: {
         applyCode:"",
         auditStatus:'',
          pageNum: 1,
          pageSize: 20,
        },

        tableColumn:[{
            name:'申请编号',
            value:'code'
        },{
            name:'推广位类型',
            value:'upMoneyQ'
        },{
            name:'Banner图片',
            value:'upMoney'
        },{
            name:'申请时间',
            value:'applyTime'
        },{
            name:'审核时间',
            value:'auditTime'
        },{
            name:'审核备注',
            value:'auditRemark'
        },{
            name:'状态',
            value:'status'
        }],
        hideTableColumn:[],/*自定义表格列需要隐藏的*/
        tableColumnType:'staffManagement',/*自定义表格列类型传参*/
        tableHeight:0,//table 高度
        dataList:[],
        total: 0,
        multipleSelection: '',
        dialogTitle: '',

        applyGoodStoreVisible:false,
        detailVisible:false,
        applyGoodStore:{
          promotionType:'',
          linkUrl:'',
          bannerImage:''
        },
        editAddrRules:{
          promotionType:[{ required: true, message: "请选择类型", trigger: "blur" }],
          linkUrl: [{ required: true, message: "请输入链接地址", trigger: "blur" }],
          bannerImage: [{ required: true, message: "请上传Banner图", trigger: "blur" }]
        },
        statusRow:{}
      }
    },
    computed: {
      pickerOptions: () => {
        return option.pickerOptions;
      }
    },
    mounted() {
      //this.getSelect();
      this.dataInfo();
      this.$nextTick(() => {
          this.tableHeight = this.$refs.index.offsetHeight  - this.$refs.search.offsetHeight  - this.$refs.actionBtn.offsetHeight  - this.$refs.page.offsetHeight - 55;
      })
    },
    methods: {
      getSelect(){
        getOrderQuantity({
          orderType:this.searchForm.orderType
        }).then((result) => {
          this.menuList = result.data;
        });
      },
      handleDetail(row){
        this.statusRow = row;
        this.detailVisible = true;
      },
      async dataInfo() {
        try {
          let data = this.addDateRange(this.searchForm, this.applyTime,'applyTimeStart','applyTimeEnd');
          data = this.addDateRange(this.searchForm, this.auditTime,'auditTimeStart','auditTimeEnd');
          this.loading = true;
          const result = await storePromotionList(data);
          if (result.code == 200) {
            this.total = result.total;
            this.dataList = result.rows;
          } else {
            this.$message.error(result.msg);
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },

      /** 重置按钮操作 */
      resetQuery() {
        this.applyTime = [];
        this.auditTime = [];
        this.resetForm("searchForm");
        this.dataInfo();
      },
      handleAdd(){
        storePromotionCompare().then((result) => {
          if (result.data == false) {
              this.dialogTitle = '申请好店推广位';
              this.applyGoodStoreVisible = true;
          } else {
            this.$message.error('每天只能提交一次');
          }
        });
      },
      submitApplyGoodStore(formName){/*申请好店推广位 提交*/
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.userLoading = true;
            let data = JSON.parse(JSON.stringify(this.applyGoodStore));
            storePromotionAdd(data).then((result) => {
              if (result.code == 200) {
                this.$message.success(result.msg);
                this.applyGoodStoreVisible = false;
                this.dataInfo();
              } else {
                this.$message.error(result.msg);
              }
              this.userLoading = false;
            });
          }
        })
      },
      imageChange(path) {
        this.applyGoodStore.bannerImage = path;
      },
      async handleChangeUpDownStatus(row) {/*上下架*/
        try {
          let data = {
            id: row.id,
            status: row.status
          }
          const result = await getCallRecord(data);
          if (result.success == true) {
            this.$message.success(result.message);
          } else {
            this.$message.error(result.message);
            row.status = !row.status;
          }
        } catch (err) {
          console.log(err)
        }
      },
      handleDelt(index,row){
        this.$confirm(`您确定要删除吗?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          dangerouslyUseHTMLString: true,
          type: 'warning'
        }).then(() => {
          storePromotionDelete({applyId:row.applyId}).then((result) => {
            if (result.code == 200) {
              this.$message.success(result.msg);
              this.dataInfo();
            } else {
              this.$message.error(result.msg);
            }
          });

        }).catch(() => {

        });
      },
      handleSearch() {
        this.searchForm.pageNum = 1;
        this.dataInfo();
      },

      handleSelectionChange(val) {
        this.multipleSelection = val;
      },

    }
  }
</script>

<style scoped lang="scss">
  .tips{
    margin:0px;
  }
    .activeCheckedBox{
      border-top: 1px solid #ddd;
      padding:10px;
      height:52px;
      .el-tag{
        margin-right:10px;
      }
    }
    .menuList{
      display: flex;
      margin-bottom: 15px;
      .menu-item{
        flex:1;
        padding:20px 20px 10px 20px;
        border:1px solid #DCDFE6;
        border-right: none;
        cursor: pointer;
        .numberBox{
          display:flex;
          justify-content:center;
        }
        .tipsNumber{
           font-size: 12px;
           height: 18px;
           line-height: 18px;
           padding: 0 6px;
           text-align: center;
           white-space: nowrap;
           position:absolute;
           background:#FF2F43;
           border-radius: 10px;
           right: -16px;
           top: -6px;
           color:#fff;
        }
        .number{
          font-size: 32px;
          position:relative;
        }
        .text{
          font-size: 16px;
          color:#333333;
          text-align: center;
        }
      }
    }
    .menuList .menu-item:last-child{
      border-right: 1px solid #DCDFE6;
    }
    .menuList .menu-item:hover{
      background-color:#D8E4DD;
    }
     .menuList .menu-item.active{
        background-color: #D8E4DD;
     }


    .table /deep/ .el-table__expanded-cell{
     background: #FAFCFB;
      padding:0 50px;
    }
    .table /deep/ .el-table__expanded-cell:hover{
     background: #FAFCFB!important;
    }
    .table /deep/ .el-table__expanded-cell .el-form-item{
      margin-bottom: 0px;
      margin-right: 30px;
    }
    .table /deep/ .el-table__expanded-cell .el-form-item__label,.table /deep/ .el-table__expanded-cell .el-form-item__content{
       height: 54px;
       line-height: 54px;
    }
    .menuActive{
      text-align: center;
      color:#3A7654;
      cursor: pointer;
      padding:10px 0;
    }
</style>
